<template>
	<div class="index bg">
		<showtitle showtitle="首页"></showtitle>

		<div class="top_search">
			<div class="search-container" @click="goPage('/searchpage')">
				<input placeholder="在此输入内容发现新世界..."></input>
			</div>
		</div>

		<div class="backTitle">
			<p>一心助农 秸秆而起</p>
		</div>

		<div class="card transparent animation2">
			<swiper :options="swiperOptions" ref="mySwiper">
				<swiper-slide v-for="(item, index) in images" :key="item.src">
					<img :src="require(`@/assets/images/${item.src}`)" alt="轮播图" @click="goPage(item.route)"/>
				</swiper-slide>
				<div slot="pagination" class="swiper-pagination"></div>
			</swiper>
		</div>

		<div class="card shadow">


			<div class="iconlist">
				<div class="iconlist_icon" v-for="icon in icons" :key="icon.id">
					<img :src="require(`@/assets/icons/${icon.src}`)" alt="icon" @click="goPage(icon.route)">
					<div>{{ icon.label }}</div>
				</div>
				<div class="iconlist_icon" v-if="showMoreIcons" v-for="moreIcon in moreIcons" :key="moreIcon.id">
					<img :src="require(`@/assets/icons/${moreIcon.src}`)" alt="icon" @click="goPage(moreIcon.route)">
					<div>{{ moreIcon.label }}</div>
				</div>
				<div class="iconlist_icon" @click="toggleMoreIcons">
					<img :src="require(`@/assets/icons/更多.png`)" alt="icon">
					<div>{{ showMoreIcons ? '收起' : '更多' }}</div>
				</div>
			</div>


			<div class="card_news_container">
				<div class="card_news_hint">
					最新<br />消息
				</div>
				<div class="card_news_item">
					<div v-if="news.length > 0" class="card_news_everycon" v-for="(item, index) in news" :key="index"
						@click="$router.push(item.path)">
						<div style="margin-right: 5vw;">{{ item.message }}</div>
						<div>{{ item.time }}</div>
					</div>
					<div v-else>
						<p>暂无最新消息</p>
					</div>
				</div>


			</div>
		</div>

		<div class="card shadow">
			<div class="card_title">活动大全</div>
			<div class="Nav2_container">
				<div class="card Nav2_container_everycon animation1">
					<div class="card_title">全站排行</div>
					<img :src="require(`@/assets/icons/排行榜.png`)" alt="icon" @click="goPage('/rank')">
				</div>
				<div class="card Nav2_container_everycon">
					<div class="card_title">问卷</div>
					<img :src="require(`@/assets/icons/问卷.png`)" alt="icon" @click="goPage('/survey')">
				</div>
				<div class="card Nav2_container_everycon">
					<div class="card_title">看点</div>
					<img :src="require(`@/assets/icons/看点.png`)" alt="icon" @click="goPage('/pages')">
				</div>
			</div>
		</div>




		<copyright></copyright>

	</div>
</template>

<script>
	export default {
		name: 'index',
		components: {

		},
		data() {
			return {
				swiperOptions: {
					speed: 3000, //匀速时间
					slidesPerView: 1,
					loop: true,
					effect: 'coverflow',
					grabCursor: true,
					coverflowEffect: {
						rotate: 50, // slide之间旋转的角度  
						stretch: 50, // slide之间的拉伸值  
						depth: 100, // slide的视距大小  
						modifier: 1, // effect的大小  
						slideShadows: true, // slide阴影  
					},
					autoplay: {
						delay: 500,
						disableOnInteraction: true,
						shadow: true,
						slideShadows: true,
						shadowOffset: 20,
						shadowScale: 0.98
					},

				},
				showMoreIcons:false,
				activeIndex: 0,
				images: [{
						src: 'banner1.png',
						route: '/mails'
					},
					{
						src: 'banner2.png',
						route: '/aichat'
					},
					{
						src: 'banner3.png',
						route: '/survey'
					},
					// 更多图片...
				],
				icons: [{
						id: 1,
						src: '我要出售.png',
						label: '我要出售',
						route: '/mails'
					}, {
						id: 3,
						src: '智能客服.png',
						label: '智能客服',
						route: '/aichat'
					}, {
						id: 4,
						src: '政策期刊.png',
						label: '政策期刊',
						route: '/policies'
					}, {
						id: 5,
						src: '问卷中心.png',
						label: '问卷中心',
						route: '/survey'
					}, {
						id: 6,
						src: '积分兑换.png',
						label: '积分兑换',
						route: '/cart'
					}, {
						id: 7,
						src: '回收排名.png',
						label: '回收排名',
						route: '/rank'
					}
					// 添加更多图标和对应的功能模块
				],
				moreIcons: [{
						id: 8,
						src: '小游戏.png',
						label: '小游戏',
						route: '/game'
					},
					{
						id: 9,
						src: '天气.png',
						label: '天气',
						route: '/forecast'
					}
				],
				news: [{
					message: '您收到一条新的联系人消息',
					time: '9:43',
					path: '/messages'
				},  {
					message: '您的订单状态有更新',
					time: '10:23',
					path: '/orders'
				}, {
					message: '有店铺上新了,来看看!!!',
					time: '11:33',
					path: '/mails'
				},{
					message: '有用户向您分享了发布的文章',
					time: '12:53',
					path: '/pages'
				},{
					message: '您收到一条新的联系人消息',
					time: '9:43',
					path: '/messages'
				}]
			}
		},
		mounted() {
			
		},
		beforeDestroy() {
			// 在组件销毁前卸载Swiper  
			this.$refs.mySwiper.swiperInstance.destroy(true,
				true); // 第二个参数为true会重置swiper到初始状态，第三个参数为true会移除swiper内部的dom元素  
		},
		computed: {

			uuid() {
				if (this.$store.state.user == null || this.$store.state.user.name == '') {
					return '未登入';
				} else {
					return this.$store.state.user.name;
				}
			}
		},
		methods: {
			openSearch() {
				this.$router.push('/searchpage');
			},
			goPage(e) {
				this.$router.push(e);
			},
			toggleMoreIcons() {
				this.showMoreIcons = !this.showMoreIcons;
			},
			handleClick(icon) {
				if (icon.route) {
					this.goPage(icon.route);
				}
			},
		}

	}
</script>
<style lang="less" scoped>
	.animation1{
		animation: 5s pulse infinite;
	}
	.animation2{
		animation: 5s pulse infinite;
	}
	.bg {
		background-image: url('../assets/images/index.jpg');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.transparent {
		background-color: rgba(255, 255, 255, 0.5) !important;
	}

	.backTitle {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.backTitle p {
		font-size: 56px;
		margin: 70px 0;
		color: #fff;
		font-family: STZhongsong;
	}

	.top_search {
		margin-top: 20px;
	}

	// 搜索框
	.search-container {
		width: 80%;
		margin: 0 auto;

	}

	.search-container input {
		width: 94%;
		outline: none;
		padding: 2.5vw 0 2.5vw 5vw;
		border-radius: 50vw;
	}



	// 轮播图
	.swiper-container {
		box-sizing: border-box;
		padding: 2vw;
		min-height: 18vh;
	}

	.swiper-slide img {
		width: 100%;
		height: 18vh;
		background-size: cover;
		border-radius: 10px;
	}


	// icon列表
	.iconlist {
		display: flex;
		flex-flow: row wrap;
		border-bottom: 2px solid #b3b3b3;
		padding-bottom: 20px;
	}

	.iconlist::-webkit-scrollbar {
		display: none;
		/* 隐藏Chrome滚动条 */
	}

	.iconlist_icon {
		min-width: 18vw;
		text-align: center;
		padding: 1vw;
	}

	.iconlist_icon {
		margin: 1vw;
	}

	.iconlist_icon div {
		text-align: center;
	}

	.iconlist_icon img {
		width: 6vw;
		height: 6vw;
	}



	//首页折线图
	.chart-container {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.chart {
		width: 90%;
		/* 设置图表宽度 */
		height: 80vw;
		/* 设置图表高度 */
	}

	.shadow {
		box-shadow: 0px 0px 10px #c9c9c9;
	}

	.card_news_container {
		position: relative;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		padding: 1vw;
		height: 12vw;
		overflow: hidden;
	}

	.card_news_hint {
		width: 15vw;

		font-size: 4vw;
		margin-top: -2vw;
		margin-left: 2vw;
		padding-right: 2vw;
		text-align: center;
		border-right: 3px solid #fdde4f;
		background: linear-gradient(#f6da4b, #fd9064);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.card_news_item {
		position: absolute;
		top: 0;
		left: 22vw;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 2vw;
		animation: move 3s linear infinite;
	}

	@keyframes move {
		0% {
			top: 4vw;
		}

		100% {
			top: -26vw;
		}
	}

	.card_news_everycon {
		display: flex;
		justify-content: space-between;
		margin: 1vw;
	}

	.card_news_everycon div:nth-child(1) {
		font-weight: #333;
	}

	.Nav2_container {
		display: flex;
		flex-direction: row;
		padding: 1vw;
	}

	.Nav2_container_everycon {
		width: 26vw;
	}

	.Nav2_container_everycon:nth-child(1) {
		width: 40vw;
	}


	.Nav2_container_everycon img {
		max-width: 18vw;
		height: 18vw;
	}

	.Nav2_container_everycon {
		text-align: center;
		margin: 10px;
	}

	.Nav2_container_everycon .card_title {
		font-weight: normal;
		color: #333;
		font-size: 32px;
	}
</style>